<!--Modal: 二维码 -->
<div class="modal fade" id="showQRCodeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">群二维码 - 仙交闲置物品置换群</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body container">
        <img src="static/xjxzwpzhqQRCode.png" alt="QRCODE" style="width: 100%;">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!--Item Modal -->

<div class="modal fade" id="itemModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <!-- Modal主体 -->
    <div class="modal-content">
      <!-- Modal头: 商品名称 -->
      <div class="modal-header">
        <h5 class="modal-title" id="itemModalTitle">
          <!-- jQuery: itemName -->
        </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <!-- 价格和运送信息 -->
      <div class="modal-body container">
        <img id="itemModalCover" style="width: 100%;" data-toggle="modal" data-target="#itemModalPic"
          onclick="loadItemModalPic(this.src)">
        <!-- jQuery: coverFileName -->
        <div class="row" style="margin-left: 0rem;">
          <h2 id="itemModalPrice" class="align-self-center" style="margin-top: 1rem;">￥?
            <!-- jQuery: itemPrice -->
          </h2>

          <div id="itemModalBandageArea" class="align-self-center" style="margin-top: 0.9rem; margin-left: 1rem;">
            <span id="itemModalBandagePost" class=" badge badge-primary">邮寄</span>
            <span id="itemModalBandageFace" class=" badge badge-success">当面交易</span>
            <span id="itemModalBandageNoNeed" class=" badge badge-success">无需运送</span>
          </div>
        </div>
        <hr>

        <!-- 简介、新旧描述和备注 -->
        <h5>简介</h5>
        <p id="itemModalDescription"></p>
        <h5>新旧描述</h5>
        <p id="itemModalOldNewRate">
          <!-- jQuery: itemOldNewRate -->
        </p>
        <small id="itemModalRemarks">
          <!-- jQuery: remarks --></small>
        <hr>

        <!-- 联系方式(未登录) -->
        <h5>联系方式</h5>
        <div>
          <p id="unloginReminder"><a href="/login">登录</a>后方可获取卖家联系方式</p>
          <p id="itemModalUserQQ" style="margin: 0.5rem; margin-left: 0; display: none;">QQ
            <!-- jQuery: userQQ -->
          </p>
          <p id="itemModalUserWeChat" style="margin: 0.5rem; margin-left: 0; display: none;">微信
            <!-- jQuery: userWeChat -->
          </p>
          <small>注: 移动端不支持直接发起QQ会话, 请长按复制信息</small>
        </div>
      </div>

      <!-- 底部按钮: 获取联系方式 / 关闭 Modal -->
      <div class="modal-footer">
        <a id="launchQQ" type="button" href="" class="btn btn-primary" target="_blank" style="display: none;">发起QQ会话</a>
        <!-- jQuery: userQQ -->
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!--Modal: 图片查看 -->
<div class="modal fade" id="itemModalPic" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content" style="width: 100%;">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">图片查看</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body container">
        <img id="realItemModalPic" src="" style="width: 100%;">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>


<script>
  function loadItemModalPic(src) {
    $("#realItemModalPic").attr('src', src)
  }
</script>